/**
 * Created by 丶龟 on 2017/8/25.
 */

"use strict";

//=============
// 引入程序依赖
//=============
import React, { Component } from 'react' ;
import { connect } from 'react-redux' ;
import { Link, browserHistory } from 'react-router' ;

//交互依赖
import NetworkEngine from '../../utils/NetworkEngine' ;
import UrlManager from '../../utils/UrlManager' ;
import ErrorBar from "../../components/Public/ErrorBar/ErrorBar" ;
//images
import logo from "../../static/img/h5/logo.png";
import gantan from "../../static/img/h5/gantan.png";

class MobileModifyPswContainer3 extends Component{
    constructor(props){
        super(props) ;
    }
    state = {
        showError : false,
        errorWord : '',
        btnType : 'done',
    }
    editPassword() {
        let password = this.refs.newPassword.value;
        let confirm = this.refs.confirm.value;
        if(this.state.checkout === 1){
            return false
        }
        if (!(password===confirm)) {
            $(this.refs.wrong).show();
            return false
        }
        else {
            let code = sessionStorage.getItem("modifyPswCode");
            if (!code) {
                this.showErrorBar("验证码失效，请返回上一单元重新验证");
                this.setState({
                    btnType : 'last',
                })
                return ;
            }
            let urlManager = new UrlManager();
            NetworkEngine(
                "post",
                urlManager.editPassword(),
                {
                    // "userId": sessionStorage.getItem('id'),
                    phone : this.props.params.id,
                    password : password,
                    confirmPassword : confirm,
                    code : code,
                }
            ).then(
                data => {
                    sessionStorage.setItem("modifyPswCode","");
                    let _data = data.data.data;
                    if (_data == true) {
                        browserHistory.push("/login")
                    } else {
                        $(this.refs.wrongError).show();
                    }
                })
        }
    }
    //errorBar展示
    showErrorBar(messageWord){
        this.setState({showError:true,errorWord:messageWord});
        setTimeout(()=>{this.setState({showError:false,errorWord:''})},3000);
    }
    checkPassword() {
        var str = this.refs.newPassword.value;
        var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
        if (!reg.test(str)||this.refs.newPassword.value === "") {
            $(this.refs.wrongPassword).show();
            this.setState({
                checkout : 1
            })
        }else{
            $(this.refs.wrongPassword).hide();
            this.setState({
                checkout : 0
            })
        }
    }
    render(){
        return(
            <div className="login-form">
                <ErrorBar showError={this.state.showError} errorWord={this.state.errorWord}/>
                <div className="logo"><img src={logo} alt="咪吱logo"/></div>
                <div className="container">
                    <div className="input-f username">
                        <input type="password" className="input" ref="newPassword" maxLength={12}
                               onChange={this.checkPassword.bind(this)} placeholder="设置密码，6-12位字母和数字组成"/>
                        <div className="wrong" ref="wrongPassword" >
                            <img src={gantan} alt="感叹"/>
                            <span ref="passwordErrorMessage">密码应该为6-12位字母和数字组成</span>
                        </div>
                    </div>
                    <div className="input-f">
                        <input type="password" className="input" ref="confirm" placeholder="确认新密码"/>
                        <div className="wrong" ref="wrong" >
                            <img src={gantan} alt="感叹"/>
                            <span>密码输入不一致</span>
                        </div>
                    </div>
                    {this.state.btnType === 'done' ?
                        <button type="btn" onClick={this.editPassword.bind(this)}
                                className="form-btn orange-btn">完成</button>
                        : <button type="btn" onClick={(e)=>{browserHistory.goBack()}}
                                  className="form-btn orange-btn">上一步</button>
                    }

                </div>
            </div>
        )
    }
}

const MobileModifyPsw3 = connect()(MobileModifyPswContainer3) ;

export { MobileModifyPsw3 as default } ;
